<script>
import {
  ref,
  onMounted,
  getCurrentInstance,
  reactive,
  defineComponent,
} from "vue";
import { useStore } from "vuex";
import Play from "@/page/play/index.vue";
//引入路由
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  components: { Play },
  
  setup() {
    const store = useStore();
    const { proxy } = getCurrentInstance();
    //创建route
    const SongNum = ref(0);
    const router = useRouter();
    const route = useRoute();
    const obj = reactive({
      SongId: "",
      title: "歌单",
      singer: "",
      describe: "",
      Album: [],
      songs: [],
      songslenght: "",
      backgroundcolor: "(255,255,255)",
      avatarUrl: "",
      identityIconUrl: "",
      nickname: "",
      shareCount: 0,
      commentCount: 0,
      subscribedCount: 0,
    });
    const getdata = () => {
      proxy.$http
        .get(proxy.$api+"/playlist/detail?id=" + route.query.id)
        .then((response) => {
          let videodata = response.data;
          if (typeof videodata == "string") {
            videodata = JSON.parse(videodata);
          }
          obj.Album = videodata.playlist;
          obj.avatarUrl = obj.Album.creator.avatarUrl;
          if (obj.Album.creator.avatarDetail != null) {
            obj.identityIconUrl =
              obj.Album.creator.avatarDetail.identityIconUrl;
          }

          obj.nickname = obj.Album.creator.nickname;
          obj.shareCount = obj.Album.shareCount;
          obj.commentCount = obj.Album.commentCount;
          obj.subscribedCount = obj.Album.subscribedCount;
          obj.songslenght = obj.Album.tracks.length;
          obj.Album.tracks.map((i, k) => {
            obj.songs.push(i);
          });
          backgroundColor();
        });
    };
    // 全部播放
    const PlayAllClick = () => {
      obj.SongId = obj.songs[0].id;
      store.commit("songID", {
        songid: obj.SongId,
        songnum: SongNum.value,
      });
    };
    // 图片色调
    const backgroundColor = () => {
      var img_url = obj.Album.coverImgUrl;
      var img = new Image();
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        img.style.display = "none";
        var imgData = ctx.getImageData(0, 0, img.width, img.height).data;
        var b = "(" + imgData[2] + "," + imgData[1] + "," + imgData[0] + ")";
        obj.backgroundcolor = b;
      };
      img.src = img_url;
      img.crossOrigin = "anonymous";
    };
    // 返回上一页
    const returnClick = () => {
      router.go(-1);
    };
    // 获取歌曲id
    const SongsClick = (id) => {
      obj.SongId = id;
      SongNum.value = 1;
      store.commit("songID", {
        songid: obj.SongId,
        songnum: SongNum.value,
      });
    };
    const SongIdNav = (val) => {
      console.log("val", val);
    };
    onMounted(() => {
      getdata();
    });
    return {
      obj,
      returnClick,
      returnClick,
      SongsClick,
      SongIdNav,
      PlayAllClick,
    };
  },
});
</script>
<template>
  <div
    class="app"
    :style="{
      'background-color': 'rgb' + obj.backgroundcolor,
    }"
  >
    <van-sticky position="top">
      <div
        class="top-box"
        :style="{
          'background-color': 'rgb' + obj.backgroundcolor,
        }"
      >
        <div class="left">
          <span class="iconfont" @click="returnClick">&#xe61d;</span>
          <div class="tit">
            {{ obj.title }}
          </div>
        </div>
        <div class="right">
          <span class="iconfont">&#xe8c4;</span>
        </div>
      </div>
    </van-sticky>
    <div class="content">
      <div class="top">
        <div class="information">
          <img class="img" v-lazy="obj.Album.coverImgUrl" />
          <div class="text">
            <div class="name">
              {{ obj.Album.name }}
            </div>
            <div class="tap">
              <div class="tapimg">
                <img class="img1" v-lazy="obj.avatarUrl" />
                <img class="img2" v-lazy="obj.identityIconUrl" />
              </div>
              <div class="tapp">{{ obj.nickname }}</div>
            </div>
            <div class="algTags">
              <span v-for="(item, index) in obj.Album.algTags" :key="index">
                {{ item }}
                <van-icon name="arrow" size="10" color="#fff" />
              </span>
            </div>
          </div>
        </div>
        <!-- 描述 -->
        <div class="description">
          <span class="van-ellipsis">{{ obj.Album.description }}</span>
          <van-icon name="arrow" size="10" color="#cfcfcf" />
        </div>
        <!-- 分享、评论、收藏-->
        <div class="taps">
          <!-- 分享 -->
          <div class="share size">
            <van-icon name="share" color="#fff" size="16" />
            <span>{{ obj.shareCount }}</span>
          </div>
          <!-- 评论 -->
          <div class="comment size">
            <van-icon name="chat" color="#fff" size="16" />
            <span>{{ obj.commentCount }}</span>
          </div>
          <!-- 收藏 -->
          <div class="collection size">
            <van-icon name="add" color="#fff" size="16" />
            <span>{{ obj.subscribedCount }}</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <van-sticky :offset-top="45">
          <div class="listtop">
            <div class="listleft" @click="PlayAllClick">
              <van-icon name="play-circle" color="red" size="14" />
              <span class="name">播放全部</span>
              <span class="num">（{{ obj.songslenght }}）</span>
            </div>
          </div>
        </van-sticky>
        <ul>
          <li
            v-for="(item, index) in obj.songs"
            :key="index"
            @click="SongsClick(item.id)"
          >
            <div class="num">
              {{ index + 1 }}
            </div>
            <div class="text">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="tap">
                <span v-for="(itx, idx) in item.ar" :key="idx">{{
                  itx.name
                }}</span>
              </div>
            </div>
            <div class="move">
              <span class="iconfont">&#xe8c4;</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <canvas id="canvas" style="display: none"></canvas>
    <!-- <div class="dixf">
      <Play @SongNew="SongIdNav" :SongNum="SongNum"></Play>
    </div> -->
  </div>
</template>

<style lang="less" scoped>
.app {
  width: 100%;
  padding-bottom:74px;
  .top-box {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    .iconfont {
      color: #fff;
      font-size: 18px;
    }
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 15px;
      }
      .tit {
        color: #fff;
        font-size: 18px;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    .top {
      overflow: hidden;
      padding: 0 8px;
      .information {
        display: flex;
        padding: 10px 0;
        .img {
          width: 100px;
          height: 105px;
          object-fit: cover;
          border-radius: 5px;
          margin-right: 10px;
        }
        .text {
          flex: 1;
          .name {
            color: #fff;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
          }
          .tap {
            display: flex;
            align-items: center;
            margin: 5px 0 10px 0;
            .tapimg {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              position: relative;
              .img1 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
              }
              .img2 {
                position: absolute;
                right: -5px;
                bottom: 0;
                width: 12px;
                height: 12px;
              }
            }
            .tapp {
              font-size: 12px;
              color: hsla(0, 0%, 100%, 0.7);
              margin-left: 10px;
            }
          }
          .algTags {
            span {
              background: rgba(225, 225, 225, 0.3);
              font-size: 12px;
              color: #fff;
              border-radius: 2px;
              margin-right: 5px;
              padding: 1px;
            }
          }
        }
      }
      .description {
        display: flex;
        align-items: center;
        span {
          font-size: 12px;
          color: #cfcfcf;
        }
      }
      .taps {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .size {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #fff;
          border-radius: 50px;
          flex: 1;
          padding: 5px 0;
          span {
            margin-left: 5px;
          }
        }
        .share {
          background: rgba(225, 225, 225, 0.3);
        }
        .comment {
          margin: 0 18px;
          background: rgba(225, 225, 225, 0.3);
        }
        .collection {
          background: rgb(255, 58, 58);
        }
      }
    }
    .bottom {
      flex: 1;
      margin-top: 20px;
      background: #fff;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      .listtop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 8px;
        .listleft {
          display: flex;
          align-items: center;
          .name {
            font-size: 14px;
            font-weight: 700;
            margin-left: 5px;
          }
          .num {
            font-size: 12px;
            color: #b7b7b7;
            margin-left: 3px;
          }
        }
      }
      li {
        display: flex;
        align-items: center;
        padding: 1px 0;
        .num {
          width: 18px;
          text-align: center;
          font-size: 14px;
          color: #b7b7b7;
          margin-left: 3px;
          margin-right: 9px;
        }
        .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .name {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
          }
          .tap {
            display: flex;
            margin-top: -7px;
            span {
              font-size: 12px;
              color: rgb(119, 119, 119);
              margin-right: 5px;
              transform: scale(0.8, 0.9);
              letter-spacing: 0.3px;
            }
          }
        }
        .move {
          .iconfont {
            font-size: 14px;
            color: #b7b7b7;
          }
        }
      }
    }
  }
  .dixf {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: auto;
  }
}
</style>